<template>
  <div id="productDetail">

      <div slot="header" class="clearfix">
        <div class="p_title">
          <el-button type='text' @click="$router.go(-1)"><i class="el-icon-back"></i></el-button>
          <span class="p_title">商品详情</span>
        </div>
      </div>
      <div class="p_detail">
        <div>
          <el-tag>商品名称</el-tag>
          <span class="detail_span">{{detailList.name}}</span>
        </div>
        <el-divider><i class="el-icon-shopping-cart-full"></i></el-divider>

        <div>
          <el-tag>商品描述</el-tag>
          <span class="detail_span">{{detailList.desc}}</span>
        </div>
        <el-divider><i class="el-icon-chat-line-round"></i></el-divider>

        <div>
          <el-tag>商品价格</el-tag>
          <span class="detail_span">{{detailList.price}}元</span>
        </div>
        <el-divider><i class="el-icon-money"></i></el-divider>

        <div>
          <el-tag>所属分类</el-tag>
          <span class="detail_span">{{pcategoryName}} / {{categoryName}}</span>
        </div>
        <el-divider><i class="el-icon-folder-opened"></i></el-divider>

        <div>
          <el-tag>规格属性</el-tag>
          <div class="spec" v-for="(item,index) in detailList.specAttr" :key="index">
              {{item.name}} : {{item.val}}
          </div>

        </div>
        <el-divider><i class="el-icon-folder-opened"></i></el-divider>

        <div>
          <el-tag>商品图片</el-tag>
          <el-image fit="scale-down" v-for="(img,index) in detailList.imgs"  :key="index" :src="img+''"></el-image>
        </div>
        <el-divider><i class="el-icon-picture-outline"></i></el-divider>

        <div>
          <el-tag>商品详情</el-tag>
          <div class="detail_span detail_content" v-html="detailList.detail"></div>
        </div>
        <el-divider><i class="el-icon-set-up"></i></el-divider>
      </div>

  </div>
</template>

<script>
import {getdetail,getcategorybyid} from '../api/index'
  export default {
    data() {
      return {
        detailList: {},
        //分类名
        pcategoryName: '',
        categoryName: '',
        id:"",
      };
    },
      async mounted() {
        this.id=this.$route.params.id
        let {data}= await getdetail({
              productId:this.id
          });
          this.detailList=data.data
          await getcategorybyid({categoryId:this.id})
        let {data:category}=await getcategorybyid({categoryId:this.id})
        console.log(category);
        if(category.data!=null){
          console.log(111);
          this.pcategoryName=category.data.name
        }
        
       
        
    },
    methods: {
    //     async getdetail(id) {
    //     let {data}= await getdetail({
    //           productId:id
    //       });
    //       this.detailList=data.data
    // },
      //获取商品详情列表
      getProductDetail() {
        // reqProductDetail(id).then((res) => {
        //   if (res.status == 0) {
        //     this.detailList = res.data;
        //     const {
        //       categoryId,
        //       pCategoryId
        //     } = res.data;
        //     //获取分类名
        //     if(pCategoryId !=0){
        //       this.getCategoryName(pCategoryId)
        //     }
        //     this.getCategoryName(categoryId)

        //   } else {
        //     this.$message({
        //       type: 'error',
        //       message: '数据获取失败',
        //       center: true
        //     });
        //   }
        // })
      },
      //获取分类名请求
      getCategoryName() {
        // reqCategory(id).then((res) => {
        //   // console.log(id)
        //   if (res.status == 0) {
        //     if (res.data.parentId == 0) {
        //       this.pcategoryName = res.data.name
        //     } else {
        //       this.categoryName = res.data.name
        //     }
        //   } else {
        //     this.$message({
        //       type: 'error',
        //       message: '数据获取失败',
        //       center: true
        //     });
        //   }
        // })
      }
     
    },
    
    // watch: {
    //   $route(value) {
    //     let id = value.params.id * 1;
    //     this.getProductDetail(id);
    //     }
    // }
  }

</script>
<style lang="less">
#productDetail {
  .p_title {
    font-size: 20px;

    .el-icon-back {
      font-size: 20px;
    }

    span {
      margin-left: 10px;
    }
  }

  .p_detail {
    .el-tag {
      font-size: 16px;
    }

    .detail_span {
      margin-left: 20px;
      font-size: 14px;
    }
    .detail_content{
        margin-left: 104px;
    }
  }

  .el-image__inner {
    width: 100px;
    height: 100px;
    vertical-align: bottom;
  }
  .el-image{
    vertical-align: middle;
     margin-left: 20px;
  }
  .el-image__error{
    padding: 0 5px;
  }

  .spec{
    margin-left: 100px;
  }
}
</style>